<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
    <style id="jsbin-css">
        html, body {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 16px;
            box-sizing: border-box;
        }

        video {
            width: 100%;
            max-width: 100%;

            background-color: #ffffff;
        }

        .videoWrapper {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            padding-top: 25px;
            height: 0;
        }

        .videoWrapper object,
        .videoWrapper embed,
        .videoWrapper video{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .videoWrapper .fullscreenBtn {
            position: absolute;
            bottom: 0;
            right: 0;

            width: 48px;
            height: 48px;

            background: none;
            border: 0;

            margin: 0;
            padding: 8px;
        }

        .videoWrapper .fullscreenBtn svg {
            width: 32px;
            height: 32px;

            fill: #4355B6;
        }
    </style>
</head>
<body>

<h1>No Poster Attribute</h1>
<div class="videoWrapper">
    <video controls>
        <source src="http://simpl.info/video/video/chrome.webm" type="video/webm">
        <source src="http://simpl.info/video/video/chrome.mp4" type="video/mp4">
        <p>This browser does not support the video element.</p>
    </video>
</div>

<h1>Poster Attribute</h1>
<div class="videoWrapper">
    <video controls poster="file:///android_asset/www/poster.jpg">
        <source src="http://simpl.info/video/video/chrome.webm" type="video/webm">
        <source src="http://simpl.info/video/video/chrome.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

<h1>No Controls</h1>
<div class="videoWrapper">
    <video>
        <source src="http://simpl.info/video/video/chrome.webm" type="video/webm">
        <source src="http://simpl.info/video/video/chrome.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
    <button class="fullscreenBtn">
        <!-- Icon from: https://useiconic.com/open/ -->
        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
            <path d="M0 0v4l1.5-1.5 1.5 1.5 1-1-1.5-1.5 1.5-1.5h-4zm5 4l-1 1 1.5 1.5-1.5 1.5h4v-4l-1.5 1.5-1.5-1.5z" />
        </svg>
    </button>
</div>

<script id="jsbin-javascript">
    var videoWrapperElements = document.querySelectorAll('.videoWrapper');

    var showFullscreenButton = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
    alert(document.fullscreenEnabled);
    alert(document.mozFullscreenEnabled);
    alert(document.webkitFullscreenEnabled);
    for(var i = 0; i < videoWrapperElements.length; i++) {
        setUpVideoElement(videoWrapperElements[i]);
    }

    function setUpVideoElement(videoWrapperElement) {
        var videoElement = videoWrapperElement.querySelector('video');
        var fullscreenBtn = videoWrapperElement.querySelector('.fullscreenBtn');
//        alert(showFullscreenButton);
        if(fullscreenBtn) {
            if(showFullscreenButton) {
                fullscreenBtn.addEventListener('click', function () {
                    // Following code from: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
                    if (videoElement.requestFullscreen) {
                        videoElement.requestFullscreen();
                    } else if (videoElement.msRequestFullscreen) {
                        videoElement.msRequestFullscreen();
                    } else if (videoElement.mozRequestFullScreen) {
                        videoElement.mozRequestFullScreen();
                    } else if (videoElement.webkitRequestFullscreen) {
                        videoElement.webkitRequestFullscreen();
                    }
                });
            } else {
                fullscreenBtn.style.display = 'none';
            }
        }

        videoElement.addEventListener('click', function(evt) {
            if (evt.target.paused) {
                evt.target.play();
            } else {
                evt.target.pause();
            }
        });
    }
</script>
</body>
</html>